<template>
  <div>
    <div v-if="prodType==92" class="c-ph24 c-mt40 c-mb10">
      <coupon-item-com :couponInfo="goodsInfo" :showFooter="false" class="c-bd1-mgray">
        <template v-slot:bodyRight>
          <div class="c-flex-column">
            <div class="c-fc-xblack c-fs26 c-fw-b c-text-ellipsis1">{{goodsInfo.name}}</div>
            <div class="c-fc-xmlred c-fs24 c-mt16">{{goodsInfo.usePoints}}{{customPointName}}</div>
          </div>
        </template>
      </coupon-item-com>
      <!-- <div class="box-show c-flex-row c-justify-sb c-h">
        <div class="c-flex-row c-flex-center c-ww150 c-h c-textAlign-c c-fc-white" :class="goodsInfo.type == 1 ? 'exchange-left' : 'coupon-bg'">
          <div v-if="goodsInfo.type == 2 || goodsInfo.type == 3">
            <div class="c-fw-b c-pb10">{{'￥' | iosPriceFilter}}<span class="c-fs40">{{Number(goodsInfo.price)}}</span></div>
            <div>{{Number(goodsInfo.amount) > 0 ? '满'+Number(goodsInfo.amount)+'可用' : '无门槛'}}</div>
          </div>
          <div v-else-if="goodsInfo.type == 5">
            <div class="c-fw-b c-pb10 c-fs40">{{Number(goodsInfo.price)}}<span class="c-fs20">折</span></div>
            <div>{{Number(goodsInfo.amount) > 0 ? '满'+Number(goodsInfo.amount)+'可用' : '无门槛'}}</div>
          </div>
          <div class="c-fs32 c-fc-white" v-else-if="goodsInfo.type == 4">
            抵价券
          </div>
          <div class="c-fs32 c-fc-white" v-else>
            兑换券
          </div>
        </div>
        <div class="c-w0 c-flex-grow1 c-pl20 c-pt30 c-pb24 c-flex-column">
          <div class="c-text-ellipsis1">{{goodsInfo.name}}</div>
          <div class="c-mt20 theme-fc">{{goodsInfo.usePoints}}{{customPointName}}</div>
        </div>
      </div> -->
    </div>
    <div class="c-w100 c-text-hidden c-p" v-else>
      <img class="c-w100 img-pe-none" :src="$addXossFilter(goodsInfo.cover, require('../../../assets/defult270.png'))" alt="">
      <div v-if="goodsInfo.stock <= 0" class="c-pa sold-out c-p-l0 c-p-t0 c-w100 c-h c-flex-row c-flex-center">
        <i class="iconfont icon-yiqiangguang c-fs150 c-hh180 c-fc-white"></i>
      </div>
    </div>

    <section>
      <div class="c-ph24 c-flex-column c-lh c-pv30 c-bd-b1">
        <div class="c-flex-row c-aligni-center c-box c-fs26 c-lh36">{{goodsInfo.name}}</div>
        <div class="c-flex-row c-aligni-center c-mt24 c-justify-sb">
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs24 theme-fc">{{goodsInfo.usePoints}}{{companyAuth.integrateName1}}</div>
            <div v-if="goodsInfo.linePoints" class="c-text-decoration-through c-fc-gray c-ml14 c-fs20">{{goodsInfo.linePoints}}{{companyAuth.integrateName1}}</div>
          </div>
          <div class="c-flex-row">
            <div class="c-fs20 c-mr12 st-fc" v-if="goodsInfo.prodType == 12">每人可兑换{{goodsInfo.limitNum}}个</div>
            <div class="c-fs20 c-fc-sblack">剩余{{goodsInfo.stock}}个</div>
          </div>
        </div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-fs20 c-fc-sblack c-mt20">
          <div v-if="prodType==92 && goodsInfo.validStatus == 0">有效期:{{goodsInfo.startTime | formatTime}}至{{goodsInfo.endTime | formatTime}}</div>
          <div v-else-if="prodType==92 && goodsInfo.validStatus > 0">领取{{goodsInfo.validStatus == 1 ? '当日' : goodsInfo.validStatus == 2 ? '次日' : goodsInfo.validStatus + '日'}}后{{goodsInfo.validPeriod}}天可用</div>
          <div v-else>兑换时间:{{goodsInfo.startTime}}至{{goodsInfo.endTime}}</div>
        </div>
      </div>
    </section>

    <section>
      <div class="c-bd-t16">
        <div id="tabhBar">
          <my-small-tabbar :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeType"></my-small-tabbar>
        </div>
        <div v-show="tabIndex == 1" class="c-ph24 c-pt20 c-pb20">
          <!-- 课程，专栏，课程预告，知识套餐的详情是图文混合 -->
          <course-description v-if="prodType == ckFrom.course || prodType == ckFrom.column || prodType == ckFrom.package || prodType == ckFrom.notice || prodType == ckFrom.shopping || prodType == ckFrom.datum || prodType == ckFrom.ebooks" :descriptInfo="goodsInfo.describe" ref="descriptions" :prodType="goodsInfo.prodType" :prodId="goodsInfo.prodId"></course-description>
          <div v-else class="c-fs24 c-lh36 c-fc-xblack c-ww-bw c-ww-ba c-contexty-scroll" v-html="goodsInfo.describe"></div>
        </div>
        <div class="c-ph24 c-pt30 c-pb60" v-show="tabIndex == 0">
          <div class="c-fs24 c-lh36 c-fc-xblack c-ww-bw c-ww-ba c-contexty-scroll" v-html="goodsInfo.explain"></div>
          <loading-status-tem
            :noData="goodsInfo.explain == '' || goodsInfo.explain == null"
            :noDataText="'暂无内容'"
          ></loading-status-tem>
        </div>
      </div>
      <div class="c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-fc-white c-fs28 c-ph24" :class="prodType==92 && goodsInfo.exchangeNum > 0 ? 'c-hh140' : 'c-hh88 c-flex-row c-flex-center'">
        <div class="theme-fc c-textAlign-c c-hh60 c-lh60" v-if="goodsInfo.exchangeNum>0 && prodType==92" @click="goExchangeRecord">已兑换,查看兑换凭证({{goodsInfo.exchangeNum}})</div>
        <div @click="exchangeGoods(goodsInfo.prodType, goodsInfo.prodId)" v-if="goodsInfo.goodsStatus == 1 && goodsInfo.timeStatus == 1 && !goodsInfo.permission && (goodsInfo.hasExchange == 0 || prodType == 12) && goodsInfo.stock > 0 && prodType != 92 && goodsInfo.status == 1" class="theme-bg c-w100 c-hh64 c-flex-row c-flex-center c-br40">立即兑换</div>
        <div @click="exchangeGoods(goodsInfo.prodType, goodsInfo.prodId)" v-if="goodsInfo.goodsStatus == 1 && (goodsInfo.timeStatus == 1 && goodsInfo.hasExchange >= 0 && goodsInfo.stock > 0 && prodType ==92 || (goodsInfo.validStatus > 0 && prodType == 92 && goodsInfo.stock > 0)) && goodsInfo.status == 1" class="theme-bg c-w100 c-hh64 c-flex-row c-flex-center c-br40">{{goodsInfo.exchangeNum> 0 ? '再兑换一次' : '立即兑换'}}</div>
        <!-- 商品下架 && 没有权限 -->
        <template v-else-if="goodsInfo.goodsStatus == 0 && ((!(goodsInfo.permission || goodsInfo.hasExchange == 1) && prodType != 12) || prodType == 12)">
          <div class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">商品已下架</div>
          <div class="c-bg-d7 c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">立即兑换</div>
        </template>
        <!-- 已兑换||已有权限 -->
        <div @click="checkPermission" v-else-if="(goodsInfo.permission || goodsInfo.hasExchange == 1) && prodType !=92 && prodType != 12" class="theme-bg c-w100 c-hh64 c-flex-row c-flex-center c-br40">
          <span class="c-fs28">{{goodsInfo.hasExchange == 1 ? '立即查看' : '已有权限，查看商品'}}</span>
        </div>
        <!-- 置灰不可点击 -->
        <div v-else-if="(goodsInfo.stock <= 0 && goodsInfo.hasExchange == 0) || goodsInfo.timeStatus == 2 || goodsInfo.timeStatus == 3 || prodType==92 && goodsInfo.stock <= 0 && goodsInfo.validStatus == 0 || goodsInfo.status != 1 || (prodType==12 && goodsInfo.stock <= 0)" class="c-bg-ccc c-w100 c-hh64 c-flex-row c-flex-center c-br40">{{goodsInfo.stock <= 0 ? '库存不足' : goodsInfo.timeStatus == 2 ? '活动暂未开始' : '活动已结束'}}</div>
      </div>
    </section>

    <div>
      <open-modal :openModal='showSpecifications' @closeModal='closeSpecModal'>
        <div class="masker-specifications-content c-flex-column">
          <div class="c-ph24 c-flex-column c-flex-grow1">
            <div class="c-flex-row c-pb28 c-pt24 c-bd-b1">
              <div class="masker-content-img c-text-hidden c-br10">
                <img class="c-w100 c-br10" :src="$addXossFilter(goodsInfo.cover, require('../../../assets/defult270.png'))" alt="" />
              </div>
              <div class="c-pt36 c-pl20 c-fs24 c-flex-grow1 c-w0">
                <div class="c-flex-row c-aligni-center c-hh24">
                  <div class="c-lh theme">
                    <span class="c-fs36 c-fc-xxlred">{{goodsInfo.usePoints}}<span class="c-fs20">{{ customPointName }}</span></span>
                  </div>
                </div>
                <div class="c-lh  c-flex-row c-fc-gray c-fs20 c-mt20">
                  <span>库存：{{goodsInfo.stock ? goodsInfo.stock + '件' : '暂无'}}</span>
                </div>
              </div>
              <div class="c-flex-shrink0">
                <div class="iconfont c-fc-gray c-fs32" @click="closeSpecModal">&#xe6e1;</div>
              </div>
            </div>

            <div class="c-pb20 c-flex-grow1 c-h0">
              <div class="c-flex-row c-pv28">
                <div class="c-flex-grow1 c-w0 c-fs26 c-fw-b">数量</div>
                <shop-number
                  :max='goodsInfo.stock < (goodsInfo.limitNum - goodsInfo.exchangeNum) ? goodsInfo.stock : (goodsInfo.limitNum - goodsInfo.exchangeNum)'
                  :inputNum='defultBuyNum'
                  @subNum='subNum'
                  @addNum='addNum'
                  @inputChange='inputChange'
                ></shop-number>
              </div>
            </div>
          </div>

          <div class="c-flex-row c-hh80">
            <div class="c-flex-grow1 c-w0 c-flex-row c-flex-center theme-bg c-fc-white c-fs28" @click="clickConfirmJoinCar">确定</div>
          </div>
        </div>
      </open-modal>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import ShopNumber from "@/components/templates/shopNumber.vue";
import courseDescription from '@/components/templates/courseDescription';
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import couponItemCom from "@/components/templates/couponItemCom.vue";
import { goDetails } from "@/utils/goDetails.js";
let isLoading = false;
export default {
  name: "IntegralProduct",
  components: {
    MySmallTabbar,
    OpenModal,
    ShopNumber,
    courseDescription,
    loadingStatusTem,
    couponItemCom
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      typeBar: 0,
      isiOS: false,
      tabList: [
        {
          title: "兑换说明",
          index: 0
        }
      ],
      tabIndex: 0,
      goodsInfo: "",
      startTime: "",
      endTime: "",
      couponType: 2, //2 优惠券 1 兑换券
      prodType: "", // 都积分商城 92积分好券
      showSpecifications: false, //显示规格
      defultBuyNum: 1,
      maxNum: 5,
      selectShopNum: 1,
      ckFrom: global.ckFrom,
    };
  },
  filters: {
    formatTime(value) {
      if (value != undefined && value != "" && value != null) {
        return value.substr(0, 10);
      } else {
        return value;
      }
    }
  },
  computed: {},
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("商品详情");
    this.isiOS =
      navigator.userAgent.indexOf("IOSLogin") > -1 ||
      navigator.userAgent.indexOf("IOSNewLogin") > -1 ||
      navigator.userAgent.indexOf("IOSNewApp") > -1;
    this.goodsId = this.$route.query.goodsId || "";
    this.prodType = "";
    this.couponType = 2;
    this.goodsInfo = "";
    this.startTime = "";
    this.endTime = "";
    this.showSpecifications = false;
    this.defultBuyNum = 1;
    this.selectShopNum = 1;
    this.tabIndex = 0;
    this.tabList = [{title: "兑换说明", index: 0}];
    this.getGoodsInfo();
  },
  methods: {
    changeType(tabIndex) {
      this.tabIndex = tabIndex;
    },
    clickConfirmJoinCar() {
      let shopInfo = [
        {
          mgId: this.goodsId, //
          mcId: "",
          avatar: this.goodsInfo.cover, //
          pointsDeduct: "", //限时购不能使用积分
          name: this.goodsInfo.name,
          price: this.goodsInfo.usePoints, //积分
          quantity: this.selectShopNum,
          shopSpecInfo: "",
          gsiiId: "",
          postage: "",
          isMail: "",
          stock: this.goodsInfo.stock,
          salesStock: "",
          collageStock: "",
          freeShipping: "",
          isFlashSales: false,
          isCollage: false,
          isIntegral: true, //积分
          pId: "",
          noLimit: false, //限购
          vipDiscount: 100,
          svipDiscount: 100,
          agentDiscount: 100,
          partnerDiscount: 100,
          branchDiscount: 100, //
          isMallExpressDeliver: this.goodsInfo.isMallExpressDeliver,
          isMallOfflineDeliver: this.goodsInfo.isMallOfflineDeliver,
          vipDiscountType: 1,
        }
      ];
      if (this.goodsInfo.freightMode == 1 && this.goodsInfo.valuationMethod && this.goodsInfo.valuationMethod == 2) {
        shopInfo.valuationMethod = this.goodsInfo.valuationMethod;
      }
      sessionStorage.setItem("shopBuyInfo", JSON.stringify(shopInfo));
      this.$routerGo(this, "push", {
        path:
          "/mall/shopSettlement/shopSettlement?fromIntegral=1&goodsId=" +
          this.goodsId +
          "&quantity=" +
          this.selectShopNum
      });
    },
    closeSpecModal() {
      this.showSpecifications = false;
    },
    //数量增加
    addNum(item) {
      this.selectShopNum = item.inputNumber;
    },
    //数量减少
    subNum(item) {
      this.selectShopNum = item.inputNumber;
    },
    //输入数量
    inputChange(item) {
      this.selectShopNum = item.inputNumber;
    },
    checkPermission() {
      goDetails(this, this.prodType, this.goodsInfo.prodId, '', this.goodsInfo.courseType, 1);
    },
    setDescribe() {
      let $this = this;
      if ($this.goodsInfo.describe.length > 1 || ($this.goodsInfo.describe.length == 1 && !!$this.goodsInfo.describe[0].content)) {
        if ($this.tabList && $this.tabList.findIndex(item => item.index == 1) < 0) { // 没有商品详情才需要加tab
          $this.tabList = [...[{title: "商品详情", index: 1}], ... $this.tabList];
        }
        $this.tabIndex = 1;
        $this.$nextTick(() => {
          if (this.hasDetail()) {
            $this.$refs.descriptions.getDescriptInfo($this.goodsInfo.describe);
          } else if ($this.goodsInfo.describe && ($this.prodType == $this.ckFrom.course || $this.prodType == $this.ckFrom.column || $this.prodType == $this.ckFrom.package || $this.prodType == $this.ckFrom.notice || $this.prodType == $this.ckFrom.shopping)) {
            $this.$refs.descriptions.getDescptionDetail();
          }
        })
      }
    },
    //是否已经有课程详情
    hasDetail() {
      if (this.goodsInfo.describe && this.prodType == this.ckFrom.course && this.goodsInfo.courseType == 2) {
        return true;
      }
      //电子书类型不需要重新取
      if (this.goodsInfo.describe && this.prodType == this.ckFrom.ebooks) {
        return true;
      }
      //资料类型不需要重新取
      if (this.goodsInfo.describe && this.prodType == this.ckFrom.datum) {
        return true;
      }
      return false;
    },
    // 获取商品详情
    getGoodsInfo() {
      let $this = this;
      //获取详情信息
      utilJs.getMethod(
        `${global.apiurl}pointMall/goodsInfo/${this.goodsId}`,
        function (res) {
          $this.goodsInfo = res;
          $this.prodType = res.prodType;
          $this.startTime = res.startTime.substr(0, 10);
          $this.endTime = res.endTime.substr(0, 10);
          $this.setDescribe();
          $this.wechatShare();
        }
      );
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        };
        window.androidWechatRoute.doAction(JSON.stringify(data));
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    // 兑换商品
    exchangeGoods(prodType, prodId) {
      //timeStatus 1：正常 2：未开始  3：已过期
      if (
        isLoading ||
        this.goodsInfo.stock <= 0 ||
        this.goodsInfo.timeStatus == 2 ||
        (this.goodsInfo.timeStatus == 3 && prodType != 92) || (this.goodsInfo.timeStatus == 3 && prodType == 92 && this.goodsInfo.validStatus == 0)
      ) {
        return;
      }

      let $this = this;
      if (prodType == 92) {
        if (
          localStorage.getItem("enableBindPhoneInRedeemCode") == 1 &&
          !localStorage.getItem("uMobile")
        ) {
          utilJs.goBindMobile();
        } else {
          isLoading = true;
          utilJs.postMethod(
            `${global.apiurl}redeemCodes/collectRedeemCodeId/${$this.goodsInfo.encRedeemCodeId}`,
            //source==9:积分兑换获得优惠券
            { goodsId: $this.goodsId, source: 9 },
            (res) => {
              isLoading = false;
              if (res.status == 8 || res.status == 15) {
                $this.$showCjToast({
                  text: "兑换成功！",
                  type: "success",
                });
                $this.getGoodsInfo();
              } else if (res.status == 4) {
                $this.$showCjToast({
                  text: "兑换时间已过期,无法继续兑换",
                  type: "warn",
                });
              } else if (res.status == 13) {
                utilJs.goBindMobile();
              } else {
                $this.$cjConfirm({
                  title: `${res.msg}`,
                  message: `${res.detail}`,
                  showCancelButton: false
                })
              }
            },
            (failRes) => {
              isLoading = false;
            }
          );
        }
      } else if (prodType == 12) {
        if (this.goodsInfo.limitNum - this.goodsInfo.exchangeNum > 0) {
          this.showSpecifications = true;
        } else {
          this.$showCjToast({
            text: "您的兑换已上限，无法继续兑换",
            type: "warn",
          });
        }
      } else {
        this.$cjConfirm({
        title: '兑换',
        message: `确定花${this.goodsInfo.usePoints}${this.companyAuth.integrateName1}兑换？`,
        onConfirm:() => {
          isLoading = true;
          utilJs.postMethod(
            `${global.apiurl}pointMall/exchangeGoods`,
            { goodsId: $this.goodsId, fromApp: 'oa' },
            (res) => {
              isLoading = false;
              //status 1.兑换成功 2.商品不存在 3.积分不足 4.库存不足 5.兑换达上限 6.兑换时间未开始 7.兑换时间已过期
              if (res.status == 1) {
                $this.getGoodsInfo();
                $this.$showCjToast({
                  text: "兑换成功！",
                  type: "success",
                });
              } else if (res.status == 3) {
                $this.$cjConfirm({
                  title: $this.customPointName + "不足",
                  message: "您的" + $this.customPointName + "不足，无法兑换",
                  confirmButtonText:"去赚" + $this.customPointName,
                  onConfirm:() => {
                    let toPath = "/member/myIntegral/integralIndex";
                    $this.iosAppRouteChange(toPath);
                  }
                })
              } else {
                let title = "";
                switch (res.status) {
                  case 2:
                    title = "商品不存在";
                    break;
                  case 4:
                    title = "库存不足";
                    break;
                  case 5:
                    title = "兑换次数达到上限";
                    break;
                  case 7:
                    title = "兑换时间已过期";
                    break;
                  case 8:
                    title = "关联商品已下架";
                    break;
                  case 9:
                    title = "该商品已下架";
                    break;
                }
                $this.$cjConfirm({
                  title: title,
                  message: `${title}，无法继续兑换`,
                  showCancelButton: false
                })
              }
            },
            (failRes) => {
              isLoading = false;
            }
          );
        }
      })
      }
    },
    goExchangeRecord() {
      let couponType = this.goodsInfo.type == 1 ? 1 : 2;
      this.$routerGo(this, "push", {
        path: "/member/myValueVoucher/myValueVoucher",
        query: {
          couponType: couponType,
          isFromCoupons: 1
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = this.goodsInfo.name;
      let shareImg = this.goodsInfo.cover;
      let shareUrl = `${
        window.location.href.split("#")[0]
      }#/member/myIntegral/integralProduct?goodsId=${
        this.goodsInfo.goodsId
      }&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.goodsInfo.prodType == 12 && !!this.goodsInfo.shareDesc ? this.goodsInfo.shareDesc : window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () {});
    },
    //手机端分享
    appShare: function () {
      let title = this.goodsInfo.name;
      let shareImg = this.goodsInfo.cover;
      let shareUrl = `${
        window.location.href.split("#")[0]
      }#/member/myIntegral/integralProduct?goodsId=${
        this.goodsInfo.goodsId
      }&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.goodsInfo && this.goodsInfo.prodType == 12 && !!this.goodsInfo.shareDesc ? this.goodsInfo.shareDesc : window.localStorage.getItem("shareDesc");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  deactivated() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pop-body {
  position: absolute;
  top: 6rem;
  height: 310px;
  background-color: #fafafa;
  border-radius: 10px;
  left: 50%;
  margin-left: -6.25rem;
  text-align: center;
  overflow: hidden;
}
.pop-body img {
  width: 122px;
  height: auto;
  margin: 0 auto;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.3rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.sold-out {
  background: rgba(0, 0, 0, 0.6);
}
.box-show {
  box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.12);
}
.coupon-bg {
  background: url("../../../../public/i/wap/coupon/coupon_left.png") no-repeat;
  background-size: 100%;
  height: 3.5rem;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.masker-specifications-content {
  background-color: #fff;
  max-height: 12.5rem;
  height: 12.5rem;
  width: 100%;
}
.masker-content-img {
  width: 3.5rem;
  height: 3.5rem;
}
.st-fc {
  color: #ff300c;
}
.bg-off-sale {
  background-color: #fff3eb;
}
.p-b88 {
  bottom: 2.2rem;
}
.c-itfc {
  color: #fe9901;
}
</style>
